<template>
  <el-card style="margin-bottom:10px">
    <CategorySelector />
  </el-card>
  <el-card>
    <!--Spu列表界面，SpuList.vue-->
    <SpuList v-if="showStatus===ShowStatus.SPU_LIST" @setShowStatus="setShowStatus" @setCurrentSpuInfo="setCurrentSpuInfo" />
    <!--Spu添加或修改界面SpuForm.vue-->
    <SpuForm v-else-if="showStatus===ShowStatus.SPU_ADD" @setShowStatus="setShowStatus" :currentSpuInfo="currentSpuInfo" />
    <!--Sku添加界面SkuForm.vue-->
    <SkuForm v-else="showStatus===ShowStatus.SKU_ADD" @setShowStatus="setShowStatus" :spu="{id:currentSpuInfo.id,spuName:currentSpuInfo.spuName}" />
  </el-card>
</template>
<script lang="ts">
export default {
  name: 'Spu'
}
</script>
<script lang="ts" setup>
// 引入三级分类的组件
import CategorySelector from '@/components/CategorySelector/index.vue'
// 引入SpuList组件
import SpuList from './components/SpuList.vue'
// 引入SpuForm组件
import SpuForm from './components/SpuForm.vue'
import { ref } from 'vue'
import type { SpuModel } from '@/api/product/model/spuModel'
// 引入三个组件切换显示的枚举标识数据
import { ShowStatus } from './types'
// 定义一个表达式,用来设置SpuList组件和SpuForm组件和SkuForm组件的显示或者隐藏
const showStatus = ref<ShowStatus>(ShowStatus.SPU_LIST)
// 用来修改显示或者隐藏的标识的方法
const setShowStatus = (val: ShowStatus) => {
  showStatus.value = val
}
// 定义一个用来初始化spu对象数据的函数
const initSpuInfo = () => ({
  tmId: undefined, // 品牌的id
  spuName: '', // 名字
  description: '', // 描述信息
  spuImageList: [], // 图片数组
  spuSaleAttrList: [] // 销售属性数组
})
// 定义一个初始化spu对象
const currentSpuInfo = ref<SpuModel>(initSpuInfo())
// 定义一个自定义事件的回调函数(分发事件,执行这个回调,传入spu对象,把初始化的spu对象重新赋值)
const setCurrentSpuInfo = (val: SpuModel = initSpuInfo()) => {
  currentSpuInfo.value = val
}
</script>
<style scoped>
</style>